﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../../../Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../../Scripts/QueryString.js"></script>
    <link href="../../../../DataUser/Style/ccbpm.css" rel="stylesheet" />
    <script src="../../../Scripts/config.js" type="text/javascript"></script>
    <script src="../../../Comm/Gener.js" type="text/javascript"></script>
    <script type="text/javascript">
        //页面启动函数.
        var initData = {};
        var pageData = {};

        var expStrs = ",FID,OID,Title,MyNum,FK_NY,Emps,RDT,EDT,CDT,Rec,";

        $(function () {

            pageData = {
                FK_MapData: GetQueryString("FK_MapData"),
                KeyOfEn: GetQueryString("KeyOfEn"),
                SelectIntKey: GetQueryString("SelectIntKey"),
                MyPK: GetQueryString("MyPK")
            };
            if (pageData.selectIntKey == null)
                pageData.selectIntKey = "0";

            //设置是否启用?
            var pkval = GetQueryString("FK_MapData") + "_" + GetQueryString("KeyOfEn");
            var attr = new Entity("BP.Sys.MapAttr", pkval);
            document.getElementById("RB_IsEnableJS_0").checked = true;
            if (attr.AtPara.indexOf('@IsEnableJS=1') >= 0)
                document.getElementById("RB_IsEnableJS_1").checked = true;

            //获得的数据.
            var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_MapExt");
            handler.AddUrlData();
            var data = handler.DoMethodReturnString("RadioBtns_Init");

            if (data != undefined && data.indexOf('err@') == 0) {
                console.error(data);
                return;
            }

            initData = JSON.parse(data);

            //从表组件集合
            var mapDtls = initData.MapDtls;
            //附件组件集合
            var frmAttachments = initData.FrmAttachments;

            //绑定左侧的列表值
            var ulListValuesLiHtml = '';

            //显示枚举/外键值
            $.each(initData.Sys_FrmRB, function (i, rb) {
                ulListValuesLiHtml += '<li style="list-style-type:none;float:left;" >' + '<input id="RB_' + rb.KeyOfEn + rb.IntKey + '"' + (rb.IntKey == pageData.selectIntKey ? ' checked="true" ' : '') + '     type="radio" name="' + pageData.KeyOfEn + '" value="' + rb.IntKey + '" /> <label for="RB_' + rb.KeyOfEn + rb.IntKey + '" > ' + rb.Lab + '</label></li>';
            })
            $('#ulListValues').html(ulListValuesLiHtml);

            //绑定选择事件
            $('[name=' + pageData.KeyOfEn + ']').bind('change', function (obj) {

                SaveCurrentConfig();
                pageData.selectIntKey = $(obj.target).val();
                BindConfig();
            })

            //绑定表单的所有字段
            var mapAttrHtml = '';
            var showMapAttr = [];
            var myIdx = 0;

            //加载表单字段
            $.each(initData.Sys_MapAttr, function (i, attr) {

                if (expStrs.indexOf(attr.KeyOfEn) != -1)
                    return;
                showMapAttr.push(attr);

                myIdx++;

                mapAttrHtml += '<tr>';
                mapAttrHtml += '<td>' + myIdx + '</td>';
                mapAttrHtml += '<td alt=' + attr.keyOfEn + ' >' + attr.Name + '</td>';
                //mapAttrHtml += '<td>' + attr.Name + '</td>';
                mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '0" name="' + attr.KeyOfEn + '" value="0"/><label for="' + attr.KeyOfEn + '0" >不设置</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '1" name="' + attr.KeyOfEn + '" value="1"/><label for="' + attr.KeyOfEn + '1" >可用</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '2" name="' + attr.KeyOfEn + '" value="2"/><label for="' + attr.KeyOfEn + '2" >可见</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '3" name="' + attr.KeyOfEn + '" value="3"/><label for="' + attr.KeyOfEn + '3" >不可见</label></td>';

                //设置的值.
                //判断是否枚举类型
                if (attr.MyDataType == 2 && attr.LGType == 1) {
                    var ses = new Entities("BP.Sys.SysEnums");
                    ses.Retrieve("EnumKey", attr.UIBindKey);
                    var operations = "<option  value=''><label>&nbsp;&nbsp;&nbsp;</label></option>";
                    $.each(ses, function (i, obj) {
                        operations += "<option  value='" + obj.IntKey + "'>" + obj.Lab + "</option>";

                    });
                    mapAttrHtml += "<td><div id='DIV_" + attr.KeyOfEn + "'><select class='form-control' name='DDL_" + attr.KeyOfEn + "' id='DDL_" + attr.KeyOfEn + "' style='width:140px'>" + operations + "</select></div></td>";
                } else {
                    mapAttrHtml += '<td><input type="text" id="TB_' + attr.KeyOfEn + '" name="TB_' + attr.KeyOfEn + '" value="" /></td>';
                }

                mapAttrHtml += '</tr>';

                //mapAttrHtml += '<tr><td>' + (i + 1) + '</td><td>' + attr.KeyOfEn + '</td><td>' + attr.Name + '</td><td><input type="radio" id="' + attr.KeyOfEn + '0" name="' + attr.KeyOfEn + '" value="0"/><label for="' + attr.KeyOfEn + '0" >不设置</label></td><td><input type="radio" id="' + attr.KeyOfEn + '1" name="' + attr.KeyOfEn + '" value="1"/><label for="' + attr.KeyOfEn + '1" >可用</label></td><td><input type="radio" id="' + attr.KeyOfEn + '2" name="' + attr.KeyOfEn + '" value="2"/><label for="' + attr.KeyOfEn + '2" >可见</label></td></td><td><input type="radio" id="' + attr.KeyOfEn + '3" name="' + attr.KeyOfEn + '" value="3"/> <label for="' + attr.KeyOfEn + '3" >不可见</label></td></tr>';

            })
            $('#Fields tbody').html(mapAttrHtml);

            //加载从表组件
            mapAttrHtml = '';
            $.each(mapDtls, function (i, dtl) {

                myIdx++;

                mapAttrHtml += '<tr>';
                mapAttrHtml += '<td>' + myIdx + '</td>';
                mapAttrHtml += '<td>' + dtl.No + '</td>';
                mapAttrHtml += '<td>' + dtl.Name + '</td>';
                mapAttrHtml += '<td><input type="radio" id="' + dtl.No + '0" name="' + dtl.No + '" value="0"/><label for="' + dtl.No + '0" >不设置</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + dtl.No + '1" name="' + dtl.No + '" value="1"/><label for="' + dtl.No + '1" >可用</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + dtl.No + '2" name="' + dtl.No + '" value="2"/><label for="' + dtl.No + '2" >可见</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + dtl.No + '3" name="' + dtl.No + '" value="3"/><label for="' + dtl.No + '3" >不可见</label></td>';

                mapAttrHtml += '</tr>';
            })
            $('#mapDtls tbody').html(mapAttrHtml);

            //加载附件组件
            mapAttrHtml = '';
            $.each(frmAttachments, function (i, ath) {

                myIdx++;

                mapAttrHtml += '<tr>';
                mapAttrHtml += '<td>' + myIdx + '</td>';
                mapAttrHtml += '<td>' + ath.MyPK + '</td>';
                mapAttrHtml += '<td>' + ath.Name + '</td>';
                mapAttrHtml += '<td><input type="radio" id="' + ath.MyPK + '0" name="' + ath.MyPK + '" value="0"/><label for="' + ath.MyPK + '0" >不设置</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + ath.MyPK + '1" name="' + ath.MyPK + '" value="1"/><label for="' + ath.MyPK + '1" >可用</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + ath.MyPK + '2" name="' + ath.MyPK + '" value="2"/><label for="' + ath.MyPK + '2" >可见</label></td>';
                mapAttrHtml += '<td><input type="radio" id="' + ath.MyPK + '3" name="' + ath.MyPK + '" value="3"/><label for="' + ath.MyPK + '3" >不可见</label></td>';

                mapAttrHtml += '</tr>';

            })
            $('#aths tbody').html(mapAttrHtml);

            //为表单字段绑定DATA
            $.each($('#Fields tbody tr'), function (i, tr) {
                var mapAttr = showMapAttr[i];

                $(tr).data(mapAttr);
            });

            BindConfig();
        });

        function bindData() {

            //保存切换配置前的

            //绑定切换后的配置
            BindConfigData();
        }

        //保存当前配置
        function SaveCurrentConfig() {

            var currentSaveRb = $.grep(initData.Sys_FrmRB, function (value) {
                return value.IntKey == pageData.selectIntKey;
            });

            if (currentSaveRb.length == 0)
                return;
            var configData = $('#formFields').serialize();

            //中文序列化乱码
            configData = decodeURIComponent(configData, true);

            configDataArr = configData.split('&');

            configDataArr = $.grep(configDataArr, function (value) {

                return (value.split('=').length == 2 && value.split('=')[1].length > 0);

            });

            var fieldsCfg = "";
            var setValue = "";

            if (configDataArr.length > 0) {
                for (var i = 0; i < configDataArr.length; i++) {
                    if (configDataArr[i].indexOf("TB_") == -1 && configDataArr[i].indexOf("DDL_") == -1)
                        fieldsCfg += '@' + configDataArr[i];
                    else
                        if (configDataArr[i].indexOf("TB_") >= 0)
                            setValue += '@' + configDataArr[i].replace("TB_", "");
                        else
                            setValue += '@' + configDataArr[i].replace("DDL_", "");
                }

            }

            var script = $('#TB_Script').val();
            var tip = $('#TB_Tip').val();

            currentSaveRb[0].Script = script;
            currentSaveRb[0].FieldsCfg = fieldsCfg;
            currentSaveRb[0].Tip = tip;
            currentSaveRb[0].SetVal = setValue;

        }


        function SaveEditData() {
            var selectRb = $.grep(initData.Sys_FrmRB, function (value) {
                return value.IntKey == pageData.selectIntKey;
            });
            $('#TB_Script').val(selectRb.Script);
            $('#TB_Tip').val(selectRb.Tip);
        }

        //绑定右侧配置信息
        function BindConfig() {
            var selectRb = $.grep(initData.Sys_FrmRB, function (value) {
                return value.IntKey == pageData.selectIntKey;
            });
            if (selectRb.length == 0) {
                $(':text').val(""); //转换之前的文本框设置值清空
                $('select').val(''); //转换之前的下拉框设置值清空
                $('#TB_Script').val("");
                $('#TB_Tip').val("");
                return;
            }

            $(':text').val(""); //转换之前的文本框设置值清空
            $('select').val(''); //转换之前的下拉框设置值清空
            $('#TB_Script').val(selectRb[0].Script);
            $('#TB_Tip').val(selectRb[0].Tip);
            //解析下面的元素显示与否
            var setVal = selectRb[0].SetVal;
            if (setVal != null && setVal != "") {
                var setVals = setVal.split("@");
                for (var i = 0; i < setVals.length; i++) {
                    if (setVals[i] != '' && setVals[i]) {
                        var valObjs = setVals[i].split('=');
                        if ($("#TB_" + valObjs[0]).length > 0)
                            $("#TB_" + valObjs[0]).val(valObjs[1]);
                        if ($("#DDL_" + valObjs[0]).length > 0)
                            $("#DDL_" + valObjs[0]).val(valObjs[1]);
                    }
                }

            }
            var fieldsCfg = selectRb[0].FieldsCfg;


            //'@ConfigInfo:' + $('[name=xx]:checked').val() + '@ViewSta:' +
            //开始绑定字段状态信息
            if (fieldsCfg != undefined) {
                var viewStaStr = fieldsCfg;
                var viewStaArr = viewStaStr.split('@');
                var viewStaObj = {};
                $.each(viewStaArr, function (i, viewSta) {
                    if (viewSta != '' && viewSta)
                        viewStaObj[viewSta.split('=')[0]] = viewSta.split('=')[1];
                });
                //为表单字段绑定DATA
                $.each($('#Fields tbody tr'), function (i, tr) {
                    var keyOfEn = $(tr).data().KeyOfEn;
                    if (viewStaObj[keyOfEn] != undefined) {
                        $('#' + keyOfEn + viewStaObj[keyOfEn]).attr('checked', true);
                    } else {
                        $('#' + keyOfEn + '0').attr('checked', true);
                    }
                });

                //为从表绑定DATA
                $.each(initData.MapDtls, function (i, dtl) {
                    var keyOfEn = dtl.No;
                    if (viewStaObj[keyOfEn] != undefined) {
                        $('#' + keyOfEn + viewStaObj[keyOfEn]).attr('checked', true);
                    } else {
                        $('#' + keyOfEn + '0').attr('checked', true);
                    }
                });

                //为附件组件绑定DATA
                $.each(initData.FrmAttachments, function (i, ath) {
                    var keyOfEn = ath.MyPK;
                    if (viewStaObj[keyOfEn] != undefined) {
                        $('#' + keyOfEn + viewStaObj[keyOfEn]).attr('checked', true);
                    } else {
                        $('#' + keyOfEn + '0').attr('checked', true);
                    }
                });

            } else {
                //为表单字段绑定DATA
                $.each($('#Fields tbody tr'), function (i, tr) {
                    var keyOfEn = $(tr).data().KeyOfEn;
                    $('#' + keyOfEn + '0').attr('checked', true);
                });

                //为从表绑定DATA
                $.each(initData.MapDtls, function (i, dtl) {
                    var keyOfEn = dtl.No;
                    $('#' + keyOfEn + '0').attr('checked', true);
                });

                //为附件组件绑定DATA
                $.each(initData.FrmAttachments, function (i, ath) {
                    var keyOfEn = ath.MyPK;
                    $('#' + keyOfEn + '0').attr('checked', true);
                });
            }
        }

        //执行保存
        function Save() {

            $("#Btn_Save").text("正在保存请稍后...");

            //保存当前打开表单信息
            SaveCurrentConfig();
            var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_MapExt");
            handler.AddPara("data", JSON.stringify(initData.Sys_FrmRB));
            handler.AddPara("FK_MapData", pageData.FK_MapData);
            handler.AddPara("FK_MapExt", pageData.MyPK);
            handler.AddPara("KeyOfEn", pageData.KeyOfEn);
            var data = handler.DoMethodReturnString("RadioBtns_Save");

            window.location.href = window.location.href;

        }

        function SaveAndClose() {
            Save();
            if (parent && parent.parent && typeof parent.parent.doCloseDialog === 'function') {
                parent.parent.doCloseDialog.call();
            } else {
                window.close();
            }
        }

        //设置是否启用
        function SaveEnableJS(ctrl) {

            var pkval = GetQueryString("FK_MapData") + "_" + GetQueryString("KeyOfEn");
            var attr = new Entity("BP.Sys.MapAttr", pkval);
            attr.SetPara("IsEnableJS", ctrl.value);
            attr.Update();

        }

        function Close() {
            if (parent && parent.parent && typeof parent.parent.doCloseDialog === 'function') {
                parent.parent.doCloseDialog.call();
            } else {
                window.close();
            }
        }
    </script>
</head>
<body>

    <h3>
        选项联动控件
        <button onclick="Save()" type="button" id="Btn_Save">
            保存
        </button>
    </h3>


    <fieldset>
        <legend>是否启用？</legend>
        <input type="radio" value="1" id="RB_IsEnableJS_1" onclick="SaveEnableJS(this)" name="RB_IsEnableJS" />
        <label for="RB_IsEnableJS_1">
            启用
        </label>
        <input type="radio" value="0" id="RB_IsEnableJS_0" onclick="SaveEnableJS(this)" name="RB_IsEnableJS" />
        <label for="RB_IsEnableJS_0">
            禁用
        </label>
        <ul>
            <li>禁用当前的配置就不生效.</li>
        </ul>


        <legend>列表值 </legend>
        <ul id="ulListValues" style="margin: 0; border: 0; padding: 0;">
        </ul>

        <br />

        <legend>联动其他的控件使其属性该表(可见，只读) </legend>
        <form id="formFields">
            <div id="Fields">
                <table>
                    <thead>
                        <tr>
                            <th>
                                #
                            </th>
                            <th>
                                字段
                            </th>

                            <th>
                                不设置
                            </th>
                            <th>
                                可编辑
                            </th>
                            <th>
                                可见？
                            </th>
                            <th>
                                不可见
                            </th>
                            <th>
                                设置值
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                注意:<font color=red>被联动的控件在傻瓜表单模式下要占三行</font>
            </div>
            <br />

            <legend>联动<font color=red>从表控件</font>使其属性该表(可见) </legend>

            <div id="mapDtls">
                <table>
                    <thead>
                        <tr>
                            <th>
                                #
                            </th>
                            <th>
                                从表ID
                            </th>
                            <th>
                                从表名
                            </th>
                            <th>
                                不设置
                            </th>
                            <th>
                                可以编辑
                            </th>
                            <th>
                                可见？
                            </th>
                            <th>
                                不可见
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <br />
            <legend>联动<font color=red>附件控件</font>使其属性该表(可见) </legend>

            <div id="aths">
                <table>
                    <thead>
                        <tr>
                            <th>
                                #
                            </th>
                            <th>
                                附件组件ID
                            </th>
                            <th>
                                附件组件名
                            </th>
                            <th>
                                不设置
                            </th>
                            <th>
                                可以编辑
                            </th>
                            <th>
                                可见？
                            </th>
                            <th>
                                不可见
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </form>
    </fieldset>


    <fieldset>
        <legend>高级设置</legend>

        <ul>
            <li>需要为每个选择项设置显示与隐藏的内容，设置js,top的提示信息.</li>
        </ul>


        <legend>执行JS脚本(可以为空)</legend>

        <div id="JS">
            <textarea rows="3" cols="50" id="TB_Script"></textarea>
        </div>

        <legend>Tip 提示信息(可以为空)</legend>
        <div id="Tip">
            <textarea rows="3" cols="50" id="TB_Tip"></textarea>
        </div>
    </fieldset>


    <div id='sqlexp' style='color: Gray; display: none'>
        <ul>
            <li>当下拉框或者radionbuttn选择的值改变时,需要联动其他的控件也要跟着隐藏与显示.</li>
            <li>该功能为每个枚举值的展现都设置为状态.</li>
        </ul>

    </div>

</body>
</html>
